<template>
	<view class="warp" :style="[{ paddingTop: StatusBar + 'px' }]">
		<!-- background pic start -->
		<view class="bg">
			<view class="logo-contnt">
				<view class="logo">
					<image src="../../../../static/logo.png" mode="aspectFit" class="image"></image>
				</view>
				<view class="desc text-bold">商家入驻</view>
			</view>
		</view>
		<!-- background pic end -->

		<view class="form-wapper">
			<view class="block-box solid-bottom">
				<view class="title">
					<image class="image" src="../../../user/static/phone.png" mode="aspectFit"></image>
				</view>
				<input focus type="number" maxlength="11" v-model="info.username" placeholder-class="placeholderClass"
					placeholder="请输入手机号" name="input" />
			</view>
			<view class="block-box solid-bottom">
				<view class="title">
					<image class="image" src="../../../user/static/pwd.png" mode="widthFix"></image>
				</view>
				<view class="pwd">
					<input placeholder-class="placeholderClass" v-if="type == 'password'" type="password"
						v-model="info.password" placeholder='请输入密码(4-8位字母或数字)' minlength="4" maxlength="8" />
					<input placeholder-class="placeholderClass" v-if="type == 'text'" type="text"
						v-model="info.password" placeholder='请输入密码(4-8位字母或数字)' minlength="4" maxlength="8" />
					<view class="pwd-right">
						<image src="../../../user/static/open.png" :data-type="type" @click.stop="is_kejian"
							v-if="type == 'text'" mode="widthFix" data-pt='type'></image>
						<image src="../../../user/static/close.png" class="close" :data-type="type"
							@click.stop="is_kejian" v-if="type == 'password'" mode="widthFix" data-pt='type'></image>
					</view>
				</view>
			</view>
			<view class="block-box solid-bottom">
				<view class="title">
					<image class="image" src="../../../user/static/pwd.png" mode="widthFix"></image>
				</view>
				<view class="pwd">
					<input placeholder-class="placeholderClass" v-if="sureType == 'password'" type="password"
						v-model="info.sure_password" placeholder='请输入确认密码' minlength="6" maxlength="12" />
					<input placeholder-class="placeholderClass" v-if="sureType == 'text'" type="text"
						v-model="info.sure_password" placeholder='请输入确认密码' minlength="6" maxlength="12" />
					<view class="pwd-right">
						<image src="../../../user/static/open.png" :data-type="sureType" @click.stop="is_kejian"
							v-if="sureType == 'text'" mode="widthFix" data-pt='sureType'></image>
						<image src="../../../user/static/close.png" class="close" :data-type="sureType"
							data-pt='sureType' @click.stop="is_kejian" v-if="sureType == 'password'" mode="widthFix">
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 立即登录按钮 start -->
		<view class="login-btn" @click="handleApply">申请</view>
		<!-- 立即登录按钮 end -->

		<view class="reg-paw flex justify-center" @tap="backLogin">
			<text class="text-999">已有账号？</text>
			<text class="text-right text-theme">立即登录</text>
		</view>

		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->
	</view>
</template>

<script>
	// 引入规则校验文件
	import {
		validate
	} from '@/common/utils/index';
	// import { UploadImg } from '@/common/utils/upload-image.js'
	// 引入上传图片公共方法
	import {
		UploadImage
	} from '@/common/utils/index';
	// 引入上传公共url
	import {
		UPLOAD_IMAGE_URL
	} from '@/common/config.js';
	import wPicker from '../../components/w-picker/w-picker.vue';
	export default {
		data() {
			return {
				info: {
					username: '',
					password: '',
					sure_password: ''
				},
				type: 'password', //密码类型
				sureType: 'password',
				is_click: false
			};
		},
		components: {
			wPicker
		},
		mounted() {},
		onLoad(option) {},
		methods: {
			is_kejian(e) {
				console.log(e);
				let type = e.currentTarget.dataset.type;
				let pt = e.currentTarget.dataset.pt;
				if (type == 'password') {
					this[pt] = 'text';
				} else {
					this[pt] = 'password';
				}
			},
			// 登录
			backLogin() {
				uni.navigateTo({
					url: '/pages/user/login/login-password/index'
				})
			},
			// 申请
			handleApply() {
				if (this.is_click) return;
				let {
					username,
					password,
					sure_password
				} = this.info;
				if (!username.trim()) {
					this.$message.info('请输入商家账号');
					return;
				}
				if (!validate(username, 'phone')) return this.$message.info('手机号不正确');
				if (!password.trim()) {
					this.$message.info('请输入密码');
					return;
				}
				if (!sure_password.trim()) {
					this.$message.info('请输入确认密码');
					return;
				}
				if (password !== sure_password) {
					this.$message.info('两次输入密码不一致');
					return;
				}
				if (!validate(password, 'password')) return this.$message.info('请输入字母或数字4-8位密码');
				

				uni.showLoading({
					title: '加载中',
					mask: true,
				});

				this.$util.debounce(
					() => {
						this.$api
							.post('/v1/610352bd214d4', {
								username: username,
								password: password
							})
							.then(res => {
								if (res.data.code == 1) {
									let status = res.data.data.status;
									if (res.data.data.store_joinin_id) uni.setStorageSync('store_joinin_id', res
										.data.data.store_joinin_id);
									if (res.data.data.store_user_id) uni.setStorageSync('store_user_id', res.data
										.data.store_user_id);

									switch (status) {
										case 1:
											// this.$message.info('您的店铺正在审核中，请耐心等待...');
											uni.showLoading({
												title: '加载中'
											});
											setTimeout(() => {
												uni.navigateTo({
													url: '/pages/user/shop/shop-success/index'
												});
												uni.hideLoading();
											}, 800);
											break;
										case 2:
											this.$message.info('您已开通店铺，请登录');
											setTimeout(() => {
												uni.navigateBack({
													delta: 1
												});
											}, 800);
											uni.hideLoading();
											break;
										case 3:
											uni.navigateTo({
												url: '/pages/user/shop/shop-agreement/index'
											});
											uni.hideLoading();
											break;
									}
								} else {
									this.$message.info(res.data.msg);
									uni.hideLoading();
								}
							})
							.catch(err => {
								console.log(err);
								uni.hideLoading();
							});
					},
					500,
					true
				);
			}
		}
	};
</script>

<style scoped lang="scss">
	// 头部返回键 start
	.cu-bar .action {
		position: relative;
		z-index: 5;
	}

	// 头部返回键 end
	// 主体 start
	.warp {
		background: #fff;
		min-height: 100vh;
		overflow: hidden;

		// background pic start
		.bg {
			height: 480rpx;
			width: 100%;

			.bg_img {
				height: 480rpx;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
		}

		.logo-contnt {
			width: 100%;
			height: 480rpx;
			overflow: hidden;

			.logo {
				margin-top: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.image {
					width: 180rpx;
					height: 180rpx;
				}
			}

			.desc {
				width: 100%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				margin-top: 32rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				color: #333333;
			}
		}

		// background pic end

		// 验证码login start
		.margin_top_56 {
			margin-top: 56rpx;
		}

		.form-wapper {
			position: relative;
			// top: -12rpx;
			z-index: 99;

			.block-box {
				margin: 0 60rpx;
				height: 124rpx;
				line-height: 124rpx;
				display: flex;
				align-items: center;
				position: relative;

				.title {
					margin: 0 28rpx 0 0rpx;
					width: 34rpx;
					height: 100%;
					position: relative;
					flex-shrink: 0;

					.image {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.pwd {
					display: flex;
					justify-content: space-between;
					width: 100%;
					align-items: center;

					input {
						flex: 1;
					}

					.pwd-right {
						position: relative;
						right: 0rpx;
						width: 34rpx;
						height: 100%;

						.close {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
						}

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			// 发送验证码 start
			.code {
				min-width: 250rpx;
				text-align: right;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff7f00;
				padding-right: 32rpx;
				background: none;

				&:after {
					border: none;
				}
			}

			// 发送验证码 end
			.paw {
				width: 140px;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 200;
				line-height: 34rpx;
				color: #333333;
				width: 100%;
				text-align: right;
				padding-right: 64rpx;
				margin: 24rpx 64rpx 24rpx 0;
			}
		}

		// 验证码login end

		// 立即登录按钮 start
		.login-btn {
			position: relative;
			// top: -14rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: $bgtheme;
			opacity: 1;
			border-radius: 44rpx;
			margin: 0 56rpx;
			font-size: 32rpx;
			color: #ffffff;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			margin-top: 104rpx;
		}

		// 立即登录end

		.reg-paw {
			margin: 32rpx 56rpx;
			// text-align: center;

			text {
				font-family: PingFangSC-Regular;
				font-weight: Regular;
				font-size: 28rpx;
				display: inline-block;
				// min-width: 25%;
				position: relative;

				&:last-child {
					color: $theme;
				}
			}

			// .wj_mh:before {
			//   position: absolute;
			//   height: 26rpx;
			//   width: 1px;
			//   background: #999;
			//   content: '';
			//   left: 0rpx;
			//   top: 8rpx;
			// }
		}

		// 快捷登录 start
		.quick {
			text-align: center;
			position: absolute;
			width: 100%;
			bottom: 39rpx;

			.quick-title {
				margin: 100rpx 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.txt {
					padding: 0 20rpx;
					font-size: 24rpx;
					font-family: PingFang-SC-Regular;
					color: #999999;
				}

				.line {
					display: block;
					width: 160rpx;
					position: relative;

					&:after {
						content: '';
						position: absolute;
						z-index: 0;
						bottom: 0;
						left: 0;
						width: 100%;
						border-bottom: 1px solid #eeeeee;
						transform: scaleY(0.5);
						transform-origin: 0 0;
					}
				}
			}

			image {
				width: 81rpx;
				height: 81rpx;
				margin: 0 35rpx;
			}
		}

		// 快捷登录 end
	}

	.box-bottom {
		position: absolute;
		bottom: 60rpx;
		width: 100%;

		.agreement {
			display: flex;
			width: 100%;
			font-family: PingFangSC-Regular;
			font-size: 22rpx;
			color: #666666;
			align-items: center;
			justify-content: center;

			.image {
				height: 24rpx;
				width: 24rpx;
				margin-right: 12rpx;
			}

			text {
				color: #4177dd;
			}
		}
	}

	.placeholderClass {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	// 主体 end
</style>